import React from 'react'
import { useRecoilState } from 'recoil'
import { designerState } from '../../../../../store'
import { Tabs, Card, Button, Collapse, Select, Form, Switch, Radio, Input, message } from 'antd'
import { EditOutlined, RedoOutlined, SettingOutlined } from '@ant-design/icons';
import { produce } from 'immer';

const { Panel } = Collapse;
const { TabPane } = Tabs;
const { Option } = Select;

interface IProps {
  children?: any;
}

const layout = {
  labelCol: { span: 8 },
  wrapperCol: { span: 16 }
}

export default function CarouselConfig (props: IProps) {
  const [selectedNode, setSelectedNode] = useRecoilState(designerState.selectedNodeAtom);

  // 更新选中节点
  const updateAttr = (key: string, value: any) => {
    const newItem = produce(selectedNode, (draft: any) => {
      draft.config.attr[key] = value
    })
    setSelectedNode(newItem)
  }

  // 更新样式
  const updateStyle = (key: string, value: any) => {
    const newItem = produce(selectedNode, (draft: any) => {
      draft.config.style[key] = value
    })
    setSelectedNode(newItem)
  }

  // 是否开启自动轮播
  const changeAutoplay = (value: any) => {
    updateAttr("autoplay", value)
  };
  
  // 指示点开关
  const changeDots = (value: any) => {
    updateAttr("dots", value)
  };

  // 指示点位置
  const changeDotPosition = (e: any) => {
    updateAttr("dotPosition", e.target.value)
  };

  // 过渡动画
  const changeEffect = (value: any) => {
    console.log('effect', value)
    updateAttr("effect", value)
  };

  // 过渡时间
  const changeSpeed = (e: any) => {
    updateAttr("speed", e.target.value)
  };
  
  const onFinish = (values: any) => {
    console.log('333 Form', values);
  };
  
  const handleChange = (activeKey: any) => {
    console.log(123, activeKey)
  }

  // 设置高度
  const changeStyleHeight = (e: any) => {
    updateStyle("height", e.target.value)
  };

  // 设置宽度
  const changeStyleWidth = (e: any) => {
    updateStyle("width", e.target.value)
  };

  return (
    <Tabs defaultActiveKey="2">
      <TabPane tab='元数据' key="1">
        <Card
          type="inner"
          title="轮播图"
          actions={[
            <Button type="text" onClick={() => message.info('访问主页') } key="1">
              <EditOutlined />
            </Button>,
            <Button type="text" onClick={() => message.info('编辑内容') } key="2">
              <SettingOutlined  />
            </Button>,
            <Button type="text" onClick={() => message.info('复制到其他工程') } key="3">
              <RedoOutlined />
            </Button>,
          ]}
        >
          <p>ID:  { selectedNode.meta.id }</p>
          <p>类型：{ selectedNode.meta.type }</p>
          <p>标识：{ selectedNode.meta.name }</p>
          <p>名称：{ selectedNode.meta.title }</p>
          <p>版本：1.0.0</p>
          <p>作者：张三</p>
        </Card>
      </TabPane>
      <TabPane tab='属性' key="2">
        <Collapse defaultActiveKey={['1', '2']} bordered={true} ghost={false} onChange={ handleChange }>
          <Panel header="基本属性" key="1" showArrow={false}>
            <Form
              // ref={this.form}
              {...layout}
              // onFinish={ onFinish }
              // initialValues={{ username: '小花狗不见了', prefix: '猜猜我是谁' }}
            >
              <Form.Item label='自动播放'>
                <Switch
                  checked={ selectedNode.config.attr.autoplay }
                  onChange={ changeAutoplay }
                  checkedChildren={"是"}
                  unCheckedChildren={"否"}
                />
              </Form.Item>
              <Form.Item label='指示点开关'>
                <Switch
                  checked={ selectedNode.config?.attr.dots }
                  onChange={ changeDots }
                  checkedChildren={"开"}
                  unCheckedChildren={"关"}
                />
              </Form.Item>
              <Form.Item label='指示点位置'>
                <Radio.Group 
                  defaultValue={ selectedNode.config?.attr.dotPosition }
                  value={ selectedNode.config?.attr.dotPosition }
                  onChange={ changeDotPosition }
                >
                  <Radio.Button value='top'>顶部</Radio.Button>
                  <Radio.Button value='bottom'>底部</Radio.Button>
                  <Radio.Button value='left'>左侧</Radio.Button>
                  <Radio.Button value='right'>右侧</Radio.Button>
                </Radio.Group>
              </Form.Item>
              <Form.Item label='动画效果'>
                <Select defaultValue={ selectedNode.config?.attr.effect } onChange={ changeEffect }>
                  <Option value="scrollx">scrollx</Option>
                  <Option value="fade">fade</Option>
                </Select>
              </Form.Item>
              <Form.Item label='轮播时间'>
                <Input 
                  onChange={ changeSpeed }
                  placeholder="毫秒为单位"
                  value={ selectedNode.config?.attr.speed }
                />
              </Form.Item>
            </Form>
          </Panel>
          <Panel header="样式" key="2" showArrow={false}>
            <Form
              // ref={this.form}
              {...layout}
              // onFinish={ onFinish }
              // initialValues={{ username: '小花狗不见了', prefix: '猜猜我是谁' }}
            >
              <Form.Item label='高度'>
                <Input 
                  onChange={ changeStyleHeight }
                  value={ selectedNode.config.style.height }
                />
              </Form.Item>
              <Form.Item label='宽度'>
                <Input 
                  onChange={ changeStyleWidth }
                  placeholder="毫秒为单位"
                  value={ selectedNode.config.style.width }
                />
              </Form.Item>
            </Form>
          </Panel>
        </Collapse>
      </TabPane>
      <TabPane tab='数据' key="3">
        <Collapse defaultActiveKey={['1', '2']} bordered={true} ghost={false} onChange={ handleChange }>
          <Panel header="基础数据" key="1" showArrow={false}>
            { JSON.stringify(selectedNode.data.raw) }
          </Panel>
          <Panel header="上下文" key="2" showArrow={false}>
            More to come~
          </Panel>
        </Collapse>
      </TabPane>
    </Tabs>
  )
}